<!DOCTYPE html>
<html ng-app="bb" ng-controller="MainController as mainCtrl">
  <head>
    <meta charset="utf-8" />
    <title ng-cloak ng-bind="appName"></title>

    <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="fragment" content="!" />

    <link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="favicon.ico"/>

    <!-- inject:css:before -->
    <link rel="stylesheet" href="css/bower.min.css">
    <link rel="stylesheet" href="css/app.min.css" />
    <!-- inject:css -->

    <!-- inject:js:before -->
  </head>
  <body>
    <div class="main-container">
      <!-- Sidebars -->
      <div ng-include="'sidebar.html'"
              ui-track-as-search-param='true'
              class="sidebar sidebar-left"></div>

      <div ng-include="'sidebar.html'"
              class="sidebar sidebar-right"></div>

      <div class="app"
           ui-swipe-right="Ui.turnOn('uiSidebarLeft')"
           ui-swipe-left="Ui.turnOff('uiSidebarLeft')">

        <!-- Navbars -->

        <div class="navbar navbar-app navbar-absolute-top">
          <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
            {{ appName }}
          </div>
          <div class="btn-group pull-left">
            <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
              <i class="fa fa-bars"></i> 导航
            </div>
          </div>
          <div class="btn-group pull-right">
            <div ui-toggle="uiSidebarRight" class="btn" ui-yield-to="navbarAction">
              <i class="fa fa-coffee"></i> 操作
            </div>
          </div>
        </div>

        <div class="navbar navbar-app navbar-absolute-bottom">
          <div class="btn-group justified">
            <a href="#/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> 首页</a>
            <a href="#/music" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> 音乐</a>
            <a href="#/news" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> 新闻</a>
            <a href="#/blog" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> 博客</a>
          </div>
        </div>

        <!-- App Body -->
        <div class="app-body" ng-class="{loading: loading}">
          <div ng-show="loading" class="app-content-loading">
            <i class="fa fa-spinner fa-spin loading-spinner"></i>
          </div>
          <div class="app-content">
            <ng-view></ng-view>
          </div>
        </div>

      </div><!-- ~ .app -->

    </div>
    <script src="js/bower/bower.min.js"></script>
    <script src="js/app.min.js"></script>
    <!-- inject:js -->
  </body>
</html>
